<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-promise的链式调用</title>
</head>

<body>

  <script>
    new Promise((resolve, reject) => {
      // 第一次网络请求的代码
      setTimeout(() => {
        resolve()
      }, 1000)

    }).then(() => {
      // 第一次拿到结果的处理代码
      console.log('Hello world');
      console.log('Hello world');
      console.log('Hello world');
      console.log('Hello world');
      console.log('Hello world');
      console.log('Hello world');

      return new Promise((resolve, reject) => {
        // 第二次网络请求的代码
        setTimeout(() => {
          resolve()
        }, 1000)

      })
    }).then(() => {
      // 第二次拿到结果的处理代码
      console.log('Hello Vue.js');
      console.log('Hello Vue.js');
      console.log('Hello Vue.js');
      console.log('Hello Vue.js');
      console.log('Hello Vue.js');
      console.log('Hello Vue.js');

      return new Promise((resolve, reject) => {
        // 第三次网络请求的代码
        setTimeout(() => {
          resolve()
        }, 1000)

      })
    }).then(() => {
      // 第三次拿到结果的处理代码
      console.log('Hello Promise');
      console.log('Hello Promise');
      console.log('Hello Promise');
      console.log('Hello Promise');
      console.log('Hello Promise');
      console.log('Hello Promise');
    })


    // 什么时候会用到Promise?
    // 一般情况下是有异步操作进行封装时，使用Promise对这个一步操作进行封装
    // new -> 构造函数（1.保存了一些状态信息， 2.执行传入的函数）
    // 在执行传入的回调函数时会传入两个参数，resolve ,reject本身又是函数

    new Promise((resolve, reject) => {
      setTimeout(() => {
        // 成功时调用resolve
        resolve('hello')

        // 失败时调用reject
      }, 1000)
    }).then((data) => {
      console.log(data);
      // 成功时处理代码
    }).catch((err) => {
      // 失败时处理代码

    })
  </script>
</body>

</html>